<style>
    html,body {
        background: black;
    }
    div{
        width: 100px;
        height: 100px;
        border: 2px solid red;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 0;
    }
    span{
        color: white;
        font-size: 40px;
    }
</style>
    <body>
        <div>
            <span></span>
        </div>
    </body>
    <script>
        function random(min,max){
            return Math.floor(Math.random()*(max-min+1)+min)
        }
        var num = 0
        document.onclick = function(evt){
            var e = evt || window.event
            var target = e.target || e.srcElement
            if(target.nodeName === 'IMG'){
                document.body.removeChild(target)
                num++
            }
            document.querySelector('span').innerText = num
        }
        setInterval(function(){
            var imgObj = document.createElement('img')
            imgObj.src = './star.gif'
            var w = random(50,60)
            imgObj.width = w
            imgObj.height = w
            imgObj.style.position = 'absolute'
            var maxW = (window.innerWidth || document.documentElement.clientWidth) - w
            var maxH = (window.innerHeight || document.documentElement.clientHeight) - w
            var l =random(0,maxW)
            var t =random(0,maxH)
            imgObj.style.left = l + 'px'
            imgObj.style.top = t + 'px'
            document.body.appendChild(imgObj)
        },1200)
    </script>